<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" type="image/x-icon"
	href="${ctxPath}/static/images/lukk.ico" media="screen" />
<link rel="icon" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<link rel="bookmark" href="${ctxPath}/static/images/lukk.ico"
	type="image/x-icon" />
<title>管理页面</title>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/highcharts.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/modules/exporting.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/modules/offline-exporting.js"></script>
<script type="text/javascript"
	src="${ctxPath}/static/js/highChart/themes/grid-light.js"></script>
</head>
<body class="sticky-header"
	onload="indexmenu('${oneMenu}','${twoMenu}');">
	<%@ include file="../index/index.jsp"%>
	<section>
		<div class="main-content" style="overflow-y: auto">
			<!-- 地址栏-->
			<div class="page-heading">
				<h3>鹿客帮</h3>
				<ul class="breadcrumb">
					<li><a>数量统计 </a></li>
					<li class="active">区域统计</li>
				</ul>
			</div>
			<div class="panel-body" style="padding-bottom: 0px;">
				<div class="panel panel-default">
					<div class="panel-heading">统计城市</div>
					<div class="panel-body">
						<form id="formSearch" class="form-horizontal">
							<div class="form-group" style="margin-top: 10px">
								<div class="form-inline col-md-1"></div>
								<div class="form-inline col-md-3">
									省份： <select id="allocatedProvinceSelect" name=""
										onchange="changeProvince(this)" style="width: 200px"
										class="selectpicker show-tick form-control"
										data-live-search="false">
									</select>
								</div>
								<div class="form-inline col-md-3">
									城市： <select id="citySelect"
										class="selectpicker show-tick form-control"
										style="width: 200px" data-live-search="false">
									</select>
								</div>
								<div class="form-inline col-md-2" style="text-align: left;">
									<button type="button" style="margin-left: 50px" id="btn_query"
										class="btn btn-primary">查询</button>
								</div>
							</div>
						</form>
					</div>
				</div>
				<table id="tb_countCity" style="width: 1600px; height: 600px"></table>
			</div>
		</div>
	</section>
</body>
<script type="text/javascript">
	$(function() {
		Highcharts.setOptions({
			lang : {
				printChart : '打印图表',
				downloadPNG : '下载JPEG 图片',
				downloadJPEG : '下载JPEG文档',
				downloadPDF : '下载PDF 图片',
				downloadSVG : '下载SVG 矢量图',
				contextButtonTitle : '下载图片',
				months : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
						'九月', '十月', '十一月', '十二月' ],
				weekdays : [ '星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六' ],
				shortMonths : [ '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月',
						'九月', '十月', '十一月', '十二月' ]
			}
		});
		var barChart1, barChart2;
		$.post('${ctxPath}/province/queryAllocatedProvinces', function(data) {
			$(data).each(
					function(index, currData) {
						$("#allocatedProvinceSelect").append(
								"<option value="+currData.areaCode+">"
										+ currData.name + "</option>");
					});
			$.post('${ctxPath}/province/selectByProvinceCode', {
				provinceCode : $('#allocatedProvinceSelect').val()
			}, function(data) {
				$(data).each(
						function(index, currData) {
							$("#citySelect").append(
									"<option value="+currData.
	code+">"
											+ currData.city + "</option>");
						});
			});
		});
		$("#btn_query").click(
				function() {
					if ($('#citySelect').val() == null
							|| $('#citySelect').val() == '') {

					} else {
						$.post('${ctxPath}/province/countByCity', {
							cityCode : $('#citySelect').val()
						}, function(data) {
							barChart1 = loadChart('column', 'tb_countCity',
									'城市区域负责统计图');
							barChart1.xAxis[0].setCategories(data.chartX);
							barChart1.series[0].setData(data.chartY);
							barChart1.setSubtitle({
								text : "区域覆盖统计图"
							});
							SetEveryOnePointColor(barChart1);
						});
					}
				});
	});
	function changeProvince(select) {
		$("#citySelect").empty();
		$.post('${ctxPath}/province/selectByProvinceCode', {
			provinceCode : $('#allocatedProvinceSelect').val()
		}, function(data) {
			$(data).each(
					function(index, currData) {
						$("#citySelect").append(
								"<option value="+currData.code+">"
										+ currData.city + "</option>");
					});
		});
	}
	//加载highchart
	function loadChart(chartType, chartID, chartTitle) {
		return new Highcharts.Chart({
			chart : {
				renderTo : chartID, // 注意这里一定是 ID 选择器
				type : chartType,
				animation : {
					duration : 1500,
					easing : 'easeOutBounce'
				}
			},
			title : {
				text : chartTitle
			},
			xAxis : {
				categories : [ "请选择统计项目" ],
				labels : {
					rotation : -45,
					style : {
						fontSize : '13px',
						fontFamily : 'Verdana, sans-serif'
					}
				}
			},
			yAxis : {
				min : 0,
				title : {
					text : chartTitle
				}
			},
			plotOptions : {
				column : {
					cursor : 'pointer',
					colorByPoint : true,
					dataLabels : {
						enabled : true,
						color : 'black',// colors[0],
						style : {
							fontWeight : 'bold'
						},
						formatter : function() {
							return "已覆盖  " + this.y + ' 人';
						}
					}
				}
			},
			tooltip : {
				formatter : function() {
					s = '<b>' + this.series.name + '</b><br/>' + this.x + ': '
							+ this.y + " 人";
					return s;
				}
			},
			series : [ {
				name : "统计覆盖人数",
				data : [],
			} ]
		});
	}
	function getRandomColorArr(length) {
		var getRandomColor = function() {
			return '#'
					+ ('00000' + (Math.random() * 0x1000000 << 0).toString(16))
							.substr(-6);
		};
		var colors = new Array();
		for (var i = 0; i < length; i++) {
			colors.push("'" + getRandomColor() + "'");
		}
		return colors;
	}
	function SetEveryOnePointColor(chart) { // 获得第一个序列的所有数据点
		var pointsList = chart.series[0].points;
		var colorArr = getRandomColorArr(pointsList.length);
		// 遍历设置每一个数据点颜色
		for (var i = 0; i < pointsList.length; i++) {
			chart.series[0].points[i].update({
				color : {
					linearGradient : {
						x1 : 0,
						y1 : 1,
						x2 : 0,
						y2 : 0
					},
					// 横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果
					stops : [
							[
									0,
									Highcharts.Color(colorArr[i]).setOpacity(1)
											.get('rgba') ],
							[ 1, 'rgb(255, 255,255)' ] ]
				}
			});
		}
	}
</script>
</html>
